<script setup lang="ts">

import {PropType, ref} from "vue";
import {useUserStore} from "@/store/user";
import {getDistance} from "@/utils/computeUtil";

interface User {
  id: number;
  username: string;
  nickname: string;
  avatar: string;
  profile: string;
  tags: string[];
  phone: string;
  email: string;
  longitude: number;
  latitude: number;
  role: string;
  points: number;
  postCount: number;
  postTotalView: number;
  likeCount: number;
  collectCount: number;
  followCount: number;
  fanCount: number;
  createTime: string;    // ISO 8601格式日期字符串
}



const props = defineProps({
  user: Object as PropType<User>
});

const userStore = useUserStore();
const loginLatitude = userStore.latitude;
const loginLongitude = userStore.longitude;
const latitude = props.user?.latitude;
const longitude = props.user?.longitude;
const distance = getDistance(loginLatitude, loginLongitude, latitude, longitude);



</script>

<template>
  <div class="userInfo">
    <div class="content">
      <img v-if="user?.avatar" :src="user?.avatar" alt="用户头像"/>
      <img v-else src="@/assets/images/defaultAvatar.png" alt="用户头像"/>
      <div class="info">
        <div class="nickname">{{ user.nickname }}</div>
        <div class="van-ellipsis avatar">{{user.profile}}</div>
        <div class="tag" v-for="tag in user.tags" >
          {{tag}}
        </div>
        <div class="random-number">¥{{ distance }} km</div>
      </div>
    </div>
    <van-button type="default" class="contact">联系我</van-button>
  </div>



</template>


<style scoped>
.userInfo {
  background-color: rgb(247, 248, 250);
  height: auto;
  margin: 8px 0;
  padding: 16px;
  border-radius: 8px;
  position: relative;
}

.content {
  display: flex;
  align-items: center;
}

img {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 16px;
}

.info {
  flex: 1;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.avatar {
  width: 80%;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.tag {
  display: inline-block;
  background-color: #f0f0f0;
  color: #666;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 8px;
}

.random-number {
  font-size: 16px;
  color: #333;
  font-family: monospace;
}

.contact {
  position: absolute;
  right: 16px;
  bottom: 16px;
  height: 30px;
  width: 70px;
  font-size: 12px;
}
</style>
